<template>
  <el-dialog title="订单选择器" :visible.sync="selectOrderVisibleDialog" width="60%" :close-on-press-escape="false"
    append-to-body>
    <div class="mar-10">
      <div class="top-operate-default">
        <div class="search-item">
          <label>搜索：</label>
          <el-select v-model="queryParams.keywordType" class="pad-l-10 pad-r-10 width-132 " placeholder="请选择">
            <el-option v-for="(item,index) in searchKeyWordTypeOptions" :key="item.value" :value="item.value"
              :label="item.label"></el-option>
          </el-select>
          <el-input v-model="queryParams.keyword" @keyup.enter.native="handleSearch" class="input-invtopl"
            placeholder="请输入搜索内容"></el-input>
          <label class="mar-l-20">时间：</label>
          <el-select v-model="queryParams.searchTimeType" class="pad-l-10 pad-r-10 width-132" placeholder="请选择时间">
            <el-option v-for="(item,index) in searchTimeTypeOptions" :key="item.value" :value="item.value"
              :label="item.label"></el-option>
          </el-select>
          <el-date-picker v-model="starEndTime" type="datetimerange" unlink-panels range-separator="至"
            class="invoice-sel-data" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss"
            :default-time="['00:00:00', '23:59:59']">
          </el-date-picker>
        </div>
      </div>
      <div class="top-operate-default btn-top-operate">
        <el-button-group class="flex">
          <el-button type="primary" @click="handleSearch" style="margin-left: 10px">查询</el-button>
          <el-button plain="" @click="resetSearch">重置</el-button>
        </el-button-group>
      </div>
      <!-- 内容列表 -->
      <div class="right-footer-area flex flex-between mar-t-10 mar-b-10 pad-l-14">
        <div class="flex">
          <div>
            <el-checkbox v-model="checkedAll" :disabled="isCanCheckAll" @change="changeCheckAll">当页全选</el-checkbox>
            <span>|</span>
            <span>已选{{multipleOrder.length}}项</span>
            <el-button type="primary" size="small" class="mar-l-15 sure-sel-bbtn" @click="handleSure">
              确认选择</el-button>
          </div>
        </div>
      </div>
      <el-table ref="multipleTable" :data="orderList" @selection-change="handleSelectionChange" v-loading="listLoading"
        element-loading-text="加载中" style="width: 100%" height="300" header-cell-class-name="default-header"
        row-class-name="default-row">
        <el-table-column width="55px" type="selection" :selectable="isValidCheckBoxUse">
        </el-table-column>
        <el-table-column label="开票金额" align="left" v-if="invoiceMethod === 0">
          <template slot-scope="scope">
            <p style="color: red;">￥{{scope.row.distributionAmount || '0.00'}}</p>
          </template>
        </el-table-column>
        <el-table-column label="订单金额" align="left">
          <template slot-scope="scope">
            ￥{{scope.row.orderPrice}}
          </template>
        </el-table-column>
        <el-table-column label="订单号" align="left" min-width="200px">
          <template slot-scope="scope">
            <div>
              <span class="color-label-l">平台单号：</span><img class="width-16 height-16"
                :src="constant.platformIconObj[scope.row.externalPlatformType]" />
              {{scope.row.externalOrderNo}}
            </div>
            <div>
              <span class="color-label-l">系统单号：</span>{{scope.row.orderNo}}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="支付时间" align="left" prop="payTime" width="100px">
        </el-table-column>
        <el-table-column label="订单状态" align="center">
          <template slot-scope="scope">
            {{orderStatus[scope.row.orderStatus]}}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="left" width="100px">
          <template slot-scope="scope">
            <el-button type="text" size="medium" @click="handleOpenOrderDetail(scope.row)">
              订单详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="right-footer-area flex flex-between pad-t-10 pad-l-14">
        <div class="flex">
          <div>
            <el-checkbox v-model="checkedAll" :disabled="isCanCheckAll" @change="changeCheckAll">当页全选</el-checkbox>
            <span>|</span>
            <span>已选{{multipleOrder.length}}项</span>
            <el-button type="primary" size="small" class="mar-l-15 sure-sel-bbtn" @click="handleSure">
              确认选择</el-button>
          </div>
        </div>
        <div>
          <div class="block">
            <!-- 列表分页 -->
            <pagination v-show="total>0" :total="total" :page.sync="queryParams.currentPage"
              :limit.sync="queryParams.size" @pagination="getList" />
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
  import {
    pagingGetOpenInvoiceProjectOrderList
  } from '@/api/goods/order'

  export default {
    props: {
      // 确认选择回调函数
      onSureCall: Function
    },
    components: {},
    directives: {},
    data() {
      return {
        listLoading: false,
        total: 0,
        orderList: [],
        queryParams: {
          enterpriseId: this.getEnterpriseId(),
          memberId: this.getMemberId(),
          currentPage: 1,
          searchTimeType: 1,
          keywordType: 1,
          keyword: '',
          size: 10,
          orderType: 33
        },
        searchKeyWordTypeOptions: [{
          'label': '平台单号',
          'value': 1
        }, {
          'label': '系统单号',
          'value': 2
        }],
        searchTimeTypeOptions: [{
          'label': '支付时间',
          'value': 1
        }, {
          'label': '生成时间',
          'value': 3
        }, {
          'label': '发货时间',
          'value': 4
        }, {
          'label': '收货时间',
          'value': 5
        }, {
          'label': '完成时间',
          'value': 6
        }],
        starEndTime: [],
        selectOrderVisibleDialog: false,
        orderStatus: [],
        multipleOrder: [],
        checkedAll: false,
        isCanCheckAll: true,
        invoiceMethod: '',
        // 能选择的总数
        canSelectedTotalNum: 0
      }
    },
    // 初始化页面
    created() {
      this.getList()
    },
    methods: {
      getList() {
        this.listLoading = true
        if (this.starEndTime) {
          if (this.starEndTime.length > 0) {
            this.queryParams.startDate = this.starEndTime[0]
            this.queryParams.endDate = this.starEndTime[1]
          }
        } else {
          this.queryParams.startDate = ''
          this.queryParams.endDate = ''
        }
        pagingGetOpenInvoiceProjectOrderList(this.queryParams).then(response => {
          if (response.isError) return
          this.orderStatus = response.data.dict.orderStatus
          this.total = response.data.total
          this.orderList = response.data.records
          if (this.orderList) {
            var notCheckNum = 0
            this.orderList.forEach((item, index) => {
              var isSelected = true
              if (this.invoiceMethod === 0) {
                var distributionAmount = item.distributionAmount
                if (!distributionAmount || parseFloat(distributionAmount) <= 0) {
                  // 禁用
                  notCheckNum = notCheckNum + 1
                  isSelected = false
                }
              }
              if (isSelected) {
                this.canSelectedTotalNum = this.canSelectedTotalNum + 1
              }
              item.isSelected = isSelected
            })
            this.isCanCheckAll = this.orderList.length === notCheckNum
          }
          this.listLoading = false
        })
      },
      // 跳转到订单详情
      handleOpenOrderDetail(orderRow) {
        const routeData = this.$router.resolve({
          path: '/order/order/detail/index',
          query: {
            orderId: orderRow.orderId
          }
        })
        window.open(routeData.href, '_blank')
      },
      handleSelectionChange(val) {
        this.multipleOrder = val
        this.checkedAll = this.multipleOrder.length === this.canSelectedTotalNum
      },
      handleSearch() {
        this.queryParams.currentPage = 1
        this.getList()
      },
      resetSearch() {
        this.searchReset()
        this.getList()
      },
      searchReset() {
        this.queryParams.currentPage = 1
        this.queryParams.keyword = ''
        this.queryParams.searchTimeType = 1
        this.queryParams.keywordType = 1
        this.starEndTime = []
        this.queryParams.startDate = ''
        this.queryParams.endDate = ''
      },
      // 验证复选框是否能选择
      isValidCheckBoxUse(row, rowIndex) {
        // true:启用,false:禁用
        return row.isSelected
      },
      changeCheckAll(val) {
        console.log(val)
        if (val) {
          this.orderList.forEach(item => {
            if (item.isSelected) {
              this.$refs.multipleTable.toggleRowSelection(item, true)
            }
          })
        } else {
          this.$refs.multipleTable.clearSelection()
        }
      },
      handleSure() {
        if (!this.multipleOrder || this.multipleOrder.length === 0) {
          this.$message({
            type: 'error',
            message: '请选择订单!'
          })
          return
        }
        this.onSureCall(this.multipleOrder)
        this.selectOrderVisibleDialog = false
        this.checkedAll = false
        this.multipleOrder = []
        this.$refs.multipleTable.clearSelection()
      },
      open(invoiceMethod, orderIds, notInvoiceIds) {
        this.canSelectedTotalNum = 0
        this.invoiceMethod = invoiceMethod
        this.queryParams.invoiceMethod = invoiceMethod
        this.queryParams.notOrderIds = orderIds ? orderIds.join(',') : ''
        this.queryParams.notInvoiceIds = notInvoiceIds ? notInvoiceIds.join(',') : ''
        this.selectOrderVisibleDialog = true
        this.resetSearch()
      }
    }
  }
</script>

<style lang="less" scoped>
  .sure-sel-bbtn {
    &.el-button {
      padding: 7px 14px;
      font-size: 13px;
    }
  }

  .color-label-l {
    color: #7d7d7d;
  }

  .input-invtopl {
    &.el-input {
      width: 130px;
    }
  }

  .btn-top-operate {
    height: auto !important;
    margin-top: -10px;
    padding-bottom: 20px;
    padding-left: 62px;
  }

  .invoice-sel-data {
    &.el-input__inner {
      width: 380px !important;
      padding: 3px 0px 3px 10px;
    }
  }

  .bgc-default {
    .flex-left {
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }

    .title-row {
      margin-top: 44px;
      margin-bottom: 25px;
    }

    .panel {
      width: 300px;
      height: 150px;
      border-radius: 4px;
      background: rgb(237, 244, 255);
      margin: 10px;
      box-shadow: 0px 3px 19px 0px rgba(154, 154, 154, 0.18);

      .line-x {
        line-height: 1.3;
      }

      img {
        border-radius: 50%;
      }

      .img-1 {
        background: #dffffd;
      }

      .img-2 {
        background: #eaf4ff;
      }

      .manage-row {
        margin: 0 24px;
        // border-top: 1px dashed #E5E5E5;

        .createBtn {
          height: 32px;
          line-height: 32px;
          border-radius: 4px;
          color: white;
          padding: 0 26px;
          font-size: 14px;

          &:hover {
            cursor: pointer;
          }
        }

        .seckillBtn {
          background-color: #46DEC6;
        }

        .postBtn {
          background-color: #409EFF;
        }
      }
    }
  }

  .downSelect {
    /deep/.el-input {
      width: 160px;
    }
  }
</style>
